<template>
	<view class="m-live" @click="handleLiveClick">
		<view class="top-avatar" :class="{'hideElement':isClear}" @click.stop>
			<view class="avatar-box">
				<image class="avatar-img"
					src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a3939145c28c46cb9805572571c8efd6.jpg"
					mode="aspectFill"></image>
			</view>
			<view class="info-box">
				<view class="name-box">妙陈</view>
				<view class="like-box">2.7万本场点赞</view>
			</view>

		</view>
		<view class="chart-box-list" :class="{'hideElement':isClear}" @click.stop>
			<view class="chart-box"
				:class="{'base-show':(chartIndex==index)&&firstIn,'chart-show':(chartIndex==index)&&!firstIn,'chart-hide':(firstRound&&(chartIndex!=index&&index!=2)&&!firstIn)||(!firstRound&&(chartIndex!=index)&&!firstIn)}"
				v-for="(item,index) in chartList" :key="index">
				<view class="chart-icon">
					<image class="chart-icon-img"
						src="https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/717576875430439e8a6249c4737e93f1.png"
						mode="aspectFill"></image>
				</view>
				<view class="chart-name">
					<view class="name-text">{{item.name}}</view>
					<!-- 				<view class="name-default" :class="{'name-fly':chartIndex==0}">人气榜</view>
					<view class="name-default" :class="{'name-fly':chartIndex==1}">小时榜</view>
					<view class="name-default" :class="{'name-fly':chartIndex==2}">观众榜</view> -->
				</view>
			</view>

		</view>





		<!-- 
		<video src="https://cdn.osisx.com/game/e416845113cdf0df55ad616de9bf72b2/20241016/VIDd634c859/VIDd634c859.mp4"
			class="pkVideo" object-fit="cover" autoplay="true" :controls="false" :loop="true"></video> -->
		<scrollPinlun ref="scrollPinlun" :bottom="135" :class="{'hideElement':isClear}" :storyId="storyId">
		</scrollPinlun>

		<view class="bottom-control-box" @click.stop>
			<view class="input-box" @touchend.prevent @click="handleBtoomInputClick" :class="{'hideElement':isClear}">
				<view class="input-control">说点什么...</view>
			</view>
			<view class="button-list">
				<view class="btn-item" @click="handleBottomBtnClick(item,index)"
					:class="{'clear-item':item.type=='clear'||item.type=='back','hideElement':isClear&&(item.type!='clear'&&item.type!='back')}"
					v-for="(item,index) in bottomBtnList" :key="index">
					<image class="item-img" v-show="item.type!='clear'" :src="item.image" mode="aspectFill"></image>
					<image class="item-img" v-show="item.type=='clear'" :src="clearUrl" mode="aspectFill"></image>
				</view>
			</view>

		</view>
		<!-- :style="{bottom:keyboardHeight+'px'}" -->
		<view class="input-fly-box" :style="{bottom:keyboardHeight+'rpx'}" @click.stop>
			<view class="fly-input-box">
				<input ref="inputRef" :adjust-position="false" v-model="inputMsg" type="text" :focus="inputIsFocus"
					@focus="inputFocus" @blur="inputBlur" @confirm="inputConfirmMessage"
					placeholder-style="color:#b9b9b9;" placeholder="说点什么..." confirm-type="send"
					class="fly-input-control" @keyboardheightchange="handleKeyBoardHeightChange" />
			</view>

			<view class="send-btn" :class="{'empty-value':!inputMsg}" @click="inputConfirmMessage">发送</view>

		</view>

		<pkClickEffect ref="pkClickEffect" @flyNowIcon="flyNowIcon"></pkClickEffect>
		<giftFloat ref="giftFloat" />
	</view>
</template>

<script>
	import scrollPinlun from '@/components/scroll-pinlun/index.vue'
	import pkClickEffect from '@/components/m-pk-click-effect/index.vue'
	import giftFloat from '@/components/m-pk/gift-float.vue'
	export default {
		props: {
			paramsJson: {
				type: Object,
				default: () => {
					return {}
				}
			},
			storyId: {
				type: String,
				default: ""
			}
		},
		components: {
			scrollPinlun,
			giftFloat,
			pkClickEffect
		},
		data() {
			return {
				backStoryId: "",
				clearUrl: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0888888149b64c3daf5455f50d1b5c6f.png",
				isClear: false,
				screenWidth: 0,
				keyboardHeight: -90,
				inputIsFocus: false,
				inputMsg: "",
				bottomBtnList: [{
						name: "默认礼物",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/a63bd408036d43b09d0133c40fde9a70.png",
						type: 'defaultGift'
					},
					{
						name: "礼物按钮",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/05070566daba4fa28f8b50320515ad9b.png",
						type: 'gift'
					},
					{
						name: "清屏按钮",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0888888149b64c3daf5455f50d1b5c6f.png",
						type: 'clear'
					},
					{
						name: "返回",
						image: "https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/8070ade7251f495bb0bf6234b6bdfabc.png",
						type: 'back'
					},
				],
				firstRound: true,
				firstIn: true,
				chartIndex: 0,
				chartInterValId: null,
				chartList: [{
						name: "人气榜"
					},
					{
						name: "小时榜"
					},
					{
						name: "观众榜"
					},
				]
			}
		},
		computed: {
			// placeholderStyle() {
			// 	return "color:#fff";
			// }

		},
		watch: {
			isClear: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.clearUrl =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/9ec962b6be32480997a3c19231b78971.png"
					} else {
						this.clearUrl =
							"https://cdn.osisx.com/e416845113cdf0df55ad616de9bf72b2/image/0888888149b64c3daf5455f50d1b5c6f.png"
					}
				},
				deep: true,

			}
		},
		mounted() {
			this.screenWidth = uni.getSystemInfoSync().screenWidth
			this.changeChartShow()
			this.getProps()
		},
		beforeDestroy() {
			clearInterval(this.chartInterValId)
		},
		methods: {
			handleLiveClick(e) {
				console.log("监听到点击", this.$refs.pkClickEffect);
				if (this.$refs.pkClickEffect) {
					this.$refs.pkClickEffect.handleTouchStart(e)
				}
			},
			getProps() {
				let paramsJson = this.paramsJson
				this.backStoryId = paramsJson.backStoryId && paramsJson.backStoryId.default ? paramsJson
					.backStoryId.default :
					this
					.backStoryId



			},
			flyNowIcon(e) {
				if (this.$refs.giftFloat) {
					this.$refs.giftFloat.handleStartFly(e)
				}
			},
			handleBottomBtnClick(item, index) {
				switch (item.type) {
					case 'defaultGift':
						break;
					case 'gift':
						break;
					case 'clear':
						this.isClear = !this.isClear
						break;
					case 'back':
						if (this.backStoryId) {
							this.$emit('getGameResult', this.backStoryId)
						}
					default:
						break;
				}
			},

			handlePxToRpx(data) {
				const pxToRpxScale = 750 / this.screenWidth;
				console.log("处理", pxToRpxScale, data);
				return data * pxToRpxScale
			},
			handleKeyBoardHeightChange(e) {
				if (e.detail.height) {
					let rpxHeight = this.handlePxToRpx(e.detail.height)
					this.keyboardHeight = rpxHeight
				} else {
					this.keyboardHeight = -90
				}

				console.log(this.keyboardHeight, '键盘高度发生变化');
			},
			handleBtoomInputClick() {
				if (this.isClear) {
					return
				}
				this.inputIsFocus = true
			},
			inputConfirmMessage() {
				console.log("发送消息");
				this.inputMsg = ""
				this.inputIsFocus = false
			},
			inputBlur() {
				console.log("失去焦点");
				this.inputIsFocus = false
			},
			inputFocus() {
				console.log("获得焦点");
			},
			changeChartShow() {
				this.chartInterValId = setInterval(() => {
					if (this.firstIn) {
						this.firstIn = false
					}
					if (this.firstRound && this.chartIndex == 1) {
						this.firstRound = false
					}
					if (this.chartIndex < 2) {
						this.chartIndex++
					} else {
						this.chartIndex = 0
					}

				}, 4000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.m-live {
		position: absolute;
		left: 0rpx;
		top: 0rpx;
		width: 100vw;
		height: 100vh;
		z-index: 9;

		.top-avatar {
			position: absolute;
			left: 20rpx;
			top: 70rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			background-color: rgba(0, 0, 0, .3);
			height: 70rpx;
			// min-width: 250rpx;
			z-index: 9;
			border-radius: 35rpx;
			padding-right: 30rpx;

			.avatar-box {
				position: relative;
				width: 70rpx;
				height: 70rpx;
				border-radius: 50%;
				box-sizing: border-box;
				padding: 5rpx;

				.avatar-img {
					width: 100%;
					height: 100%;
					border-radius: 50%;
				}
			}

			.info-box {
				flex: 1;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				box-sizing: border-box;
				margin-left: 5rpx;

				.name-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 24rpx;
					line-height: 24rpx;
					color: #fff;
					font-weight: 700;
					margin-bottom: 10rpx;

				}

				.like-box {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					font-size: 18rpx;
					line-height: 18rpx;
					color: rgba(255, 255, 255, .8);
				}

			}
		}

		.chart-box-list {
			position: absolute;
			left: 20rpx;
			top: 160rpx;
			width: 200rpx;
			height: 42rpx;
			overflow: hidden;


			.chart-box {
				position: absolute;
				left: 0rpx;
				bottom: -40rpx;
				// width: 120rpx;
				height: 35rpx;

				border-radius: 18rpx;
				background-color: rgba(0, 0, 0, .3);
				z-index: 9;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 0rpx 10rpx;
				margin-bottom: 5rpx;


				.chart-icon {
					width: 30rpx;
					height: 30rpx;
					// background-color: pink;
					display: flex;
					justify-content: center;
					align-items: center;

					.chart-icon-img {
						width: 26rpx;
						height: 26rpx;
					}
				}

				.chart-name {
					position: relative;
					flex: 1;
					height: 100%;
					width: 60rpx;
					font-size: 18rpx;
					color: #fff;
					line-height: 18rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					margin-left: 5rpx;
					overflow: hidden;


					.name-default {
						position: absolute;
						left: 50%;
						top: 130%;
						transform: translate(-50%, -50%);
						width: 100%;
						transform: all 1s;
					}


					.name-fly {

						top: 50%;

					}
				}


			}

			.base-show {
				bottom: 0rpx;
			}

			.chart-show {
				animation: chartShowAni 1s linear forwards;
			}



			.chart-hide {
				animation: chartHideAni 1s linear forwards;
			}

			@keyframes chartShowAni {
				0% {
					bottom: -40rpx;
				}

				100% {
					bottom: 0rpx;
				}

			}

			@keyframes chartHideAni {
				0% {
					bottom: 0rpx;
				}


				100% {
					bottom: 40rpx;
				}
			}




		}

		.bottom-control-box {
			position: absolute;
			left: 0rpx;
			bottom: 15rpx;
			width: 100vw;
			height: 80rpx;
			z-index: 999;
			box-sizing: border-box;
			padding: 0rpx 30rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;

			.input-box {
				flex: 1;
				height: 65rpx;
				border-radius: 33rpx;
				background-color: rgba(0, 0, 0, .3);
				margin-right: 20rpx;

				display: flex;
				justify-content: flex-start;
				align-items: center;

				overflow: hidden;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.input-control {
					flex: 1;
					height: 100%;
					background-color: transparent;
					font-size: 24rpx;
					color: rgba(255, 255, 255, .8);
					line-height: 24rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;
				}
			}

			.button-list {
				height: 100%;
				display: flex;
				justify-content: flex-start;
				align-items: center;

				.btn-item {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 20rpx;
					background-color: rgba(0, 0, 0, .3);
					display: flex;
					justify-content: center;
					align-items: center;

					.item-img {
						width: 90%;
						height: 90%;
						border-radius: 50%;
					}

					&:last-child {
						margin-right: 0rpx;
					}
				}

				.clear-item {
					.item-img {
						width: 60%;
						height: 60%;
						border-radius: 0rpx;
					}
				}

			}

			.default-gift,
			.gift-box {
				width: 65rpx;
				height: 65rpx;
				border-radius: 50%;
				margin-right: 10rpx;
				background-color: rgba(0, 0, 0, .3);
				display: flex;
				justify-content: center;
				align-items: center;

				.icon-img {
					width: 90%;
					height: 90%;
					border-radius: 50%;
				}
			}
		}

		.input-fly-box {
			position: absolute;
			left: 0rpx;
			width: 100%;
			height: 90rpx;
			background-color: #fff;
			z-index: 99999;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			// transition: bottom 0.1s;
			bottom: -80rpx;


			.fly-input-box {
				flex: 1;
				height: 65rpx;
				border-radius: 33rpx;
				background-color: rgba(0, 0, 0, .1);
				margin-right: 20rpx;

				display: flex;
				justify-content: flex-start;
				align-items: center;

				overflow: hidden;
				box-sizing: border-box;
				padding: 10rpx 20rpx;

				.fly-input-control {
					flex: 1;
					height: 100%;
					background-color: transparent;
					font-size: 24rpx;
					color: #393939;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					line-height: 24rpx;
				}
			}


			.send-btn {
				height: 55rpx;
				font-size: 24rpx;
				line-height: 24rpx;
				text-align: center;
				border-radius: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 0rpx 20rpx;
				color: #fff;
				background-color: #f72f54;
			}

			.empty-value {
				opacity: 0.4;
			}
		}



		.pkVideo {
			position: absolute;
			width: 100vw;
			height: 100vh;
			object-fit: cover;
			z-index: 1;
		}
	}

	.hideElement {
		opacity: 0
	}
</style>